<template>
  <div class="Home">
    <el-container>
      <el-header class="px30">
        <div class="row_lr height_100">
          <div class="logo">厦门某某信息科技有限公司</div>
          <div class="other cursor_po">
            <el-dropdown class="font_white" @command="commandHandler">
              <span class="el-dropdown-link row_default">
                <div class="user_icon"></div>
                <div class="ml5">一号员工<i class="el-icon-arrow-down el-icon--right"></i></div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="editUser">
                  <i class="el-icon-edit-outline el-icon--right"></i>{{$t('editUser')}}
                </el-dropdown-item>
                <el-dropdown-item command="langChange">
                  <i class="el-icon-setting el-icon--right"></i>{{$t('langChange')}}
                </el-dropdown-item>
                <el-dropdown-item command="signOut">
                  <i class="el-icon-switch-button el-icon--right"></i>{{$t('signOut')}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import {changeLang} from "../utils/funs";

export default {
  name:'Home',
  data() {
    return {
      thisIndex: null, //当前选中的下标
    }
  },
  //过滤器
  filters: {
  },
  //created创建完毕状态
  created() {
  },
  methods:{
    //语言切换
    commandHandler(type){
      if(type === 'langChange'){
        const locale = this.$i18n.locale;
        let localeNew = 'cn';
        if (locale === 'cn'){
          localeNew = 'en';
        }
        changeLang(this,localeNew);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.Home{
  background-color: #f9f5f9;
}
.el-header {
  color: #ffffff;
  background-color: #2C3E50;
}
.el-aside {
  color: #ffffff;
  background-color: #34495E;
}
.el-main {
  height: calc(100vh - 60px);
  margin-left: 15px;
  padding: 0;
}

</style>
